<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>指标卡管理</title>
<meta name="decorator" content="default" />
<link href="${ctxStatic}/quota.css" type="text/css" rel="stylesheet" />
<link href="${ctxStatic}/font-awesome/css/font-awesome.min.css"
	type="text/css" rel="stylesheet" />
<style type="text/css">
	.dataArea{
		font-size:300%;
	}
	.quota-name{
	    font-size:20px;
	    color:#3e4148;
	    padding: 15px 20px;
	    font-weight: 800;
	}
	.quota-content{
	    padding: 80px 20px;
	    text-align: center;
	    font-size:50px;
	}
</style>
<script type="text/javascript">
		function page(n,s){
			$("#pageNo").val(n);
			$("#pageSize").val(s);
			$("#searchForm").submit();
        	return false;
        }
		function quotaForm(quotaId){
			var url = "${ctx}/ins/insQuota/form?id="+quotaId;
			top.$.jBox.open("iframe:"+url, "指标卡详情",810,$(top.document).height()-120,{
                buttons:{"提交":"ok", "关闭":true}, bottomText:"指标卡详情",submit:function(v, h, f){
                    var code;
                    if (v=="ok"){
                    	// 执行保存
                        //loading('正在提交，请稍等...');
                    	var flag = h.find("iframe")[0].contentWindow.submitForm();
                    	if(flag){
                    		location.reload();
                    	}
                        return false;
                    }
                }, loaded:function(h){
                    $(".jbox-content", top.document).css("overflow-y","hidden");
                }
            });
		}
		function refresh(quotaId){
			chart(quotaId);
		}
		function selectTable(dashboardId){
			var url = "${ctx}/ins/insQuota/selectTable?dashboardId="+dashboardId;
			top.$.jBox.open("iframe:"+url, "工作表选择",710,$(top.document).height()-420,{
                buttons:{"提交":"ok", "关闭":true}, bottomText:"工作表选择",submit:function(v, h, f){
                    var code;
                    if (v=="ok"){
                    	// 执行保存
                        //loading('正在提交，请稍等...');
                    	/* var flag = h.find("iframe")[0].contentWindow.submitForm();
                    	if(flag){
                    		//location.reload();
                    	} */
                    	var name = h.find("iframe")[0].contentWindow.submitForm();
                    	if(name != false){
                    		location.href = name;
                    	}
                        return false;
                    }
                }, loaded:function(h){
                    $(".jbox-content", top.document).css("overflow-y","hidden");
                }
            });
		}
		function chart(id){
			var url = "${ctx}/ins/insQuota/getData";
			var data = {"id":id};
			$.ajax({
				type: 'POST',
				url : url,
				async:false,
				data: data,             //获取表单数据
				success : function(result) {
					var myChart = echarts.init(document.getElementById(id));
					var option = $.parseJSON(result);
					//说明是指标卡
					if(option.quota){
						$("#quota_"+id).children("#dataArea").html(option.value);
						$("#quota_tit_"+id).children("#dataName").html(option.name);
						$("#"+id).hide();
						$("#quota_"+id).show();
					}else{
    					var seriesLength = option.series.length;
    					myChart.clear();
    					if(seriesLength>0){
    						if(option.yAxis){
	    						option.yAxis.axisLabel={
	    					            margin: 2,
	    					            formatter: function (value, index) {
	    					            	var val = Math.abs(value);
	    					                if (val >= 1000 && val < 1000000) {
	    					                    value = value / 1000 + "K";
	    					                } else if (val >= 1000000) {
	    					                    value = value / 1000000 + "M";
	    					                }
	    					                return value;
	    					            }
	    					        }
    						}
        					myChart.setOption(option);
    					}
					}
				},
				error : function(data){
					alertx("无权限");
				}
			});
		}
		$(document).ready(function() {
			$(".dataArea").each(function(){
				var id = $(this).attr("id");
				chart(id);
			});
		});
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li class="active"><a href="${ctx}/ins/insQuota/list?dashboard.id=${insQuota.dashboard.id}">图表列表</a></li>
		<shiro:hasPermission name="ins:insQuota:edit">
			<li><a href="javascript:void(0);" onclick="selectTable('${insQuota.dashboard.id}');">图表添加</a></li>
		</shiro:hasPermission>
	</ul>
	<%-- <form:form id="searchForm" modelAttribute="insQuota"
		action="${ctx}/ins/insQuota/" method="post"
		class="breadcrumb form-search">
		<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}" />
		<input id="pageSize" name="pageSize" type="hidden"
			value="${page.pageSize}" />
		<ul class="ul-form">
			<li class="btns"><input id="btnSubmit" class="btn btn-primary"
				type="submit" value="查询" /></li>
			<li class="clearfix"></li>
		</ul>
	</form:form> --%>
	<div class="box box-bottom">
		<div class="product-list">
			<ul class="product-ul product-ul-quota">
				<sys:message content="${message}" />
				<!-- 所有指标卡 -->
				<c:forEach items="${list}" var="quota">
					<li class="product-box-quota">
						<div class="product-info">
							<div class="project-name" id="quota_tit_${quota.id}">
								<a href="${ctx}/ins/insQuota/form?id=${quota.id}" id="dataName"></a>
							</div>
							<%-- ${quota.name}<div>
								<label class="control-label">数据表标识：${quota.table.tableId}</label>
							</div>
							<div>
								<label class="control-label">数据表版本：${quota.table.version}</label>
							</div> --%>
							<div id="${quota.id}" class="project-content dataArea">
							</div>
							<div id="quota_${quota.id}" class="project-content" style="display:none;">
								<!-- <div class="quota-name" id="dataName">
								</div> -->
								<div class="quota-content" id="dataArea">
								</div>
							</div>
							<span class="btn-option-horizontal">
								<div class="dropdown">
									<span class="fa fa-ellipsis-h dropdown-toggle"
										data-toggle="dropdown"></span>
									<ul class="dropdown-menu">
										<shiro:hasPermission name="pro:project:edit">
											<li><a href="javascript:void(0);"
												onclick="refresh('${quota.id}');">刷新</a></li>
											<li>
												<a href="${ctx}/ins/insQuota/delete?id=${quota.id}" onclick="return confirmx('确认要删除该指标卡吗？', this.href)">删除</a>
											</li>
										</shiro:hasPermission>
									</ul>
								</div>
							</span>
						</div>
					</li>
				</c:forEach>
				<!-- 所有非指标卡 -->
				<c:forEach items="${notQuotaList}" var="quota">
					<li class="product-box">
						<div class="product-info">
							<div class="project-name">
								<a href="${ctx}/ins/insQuota/form?id=${quota.id}">${quota.name}</a>
							</div>
							<div id="${quota.id}" class="project-content dataArea">
							</div>
							<div id="quota_${quota.id}" class="project-content" style="display:none;">
								<div class="quota-name" id="dataName">
								</div>
								<div class="quota-content" id="dataArea">
								</div>
							</div>
							<span class="btn-option-horizontal">
								<div class="dropdown">
									<span class="fa fa-ellipsis-h dropdown-toggle"
										data-toggle="dropdown"></span>
									<ul class="dropdown-menu">
										<shiro:hasPermission name="pro:project:edit">
											<li><a href="javascript:void(0);"
												onclick="refresh('${quota.id}');">刷新</a></li>
											<li>
												<a href="${ctx}/ins/insQuota/delete?id=${quota.id}" onclick="return confirmx('确认要删除该指标卡吗？', this.href)">删除</a>
											</li>
										</shiro:hasPermission>
									</ul>
								</div>
							</span>
						</div>
					</li>
				</c:forEach>
			</ul>
		</div>
	</div>
	<%-- <table id="contentTable" class="table table-striped table-bordered table-condensed">
		<thead>
			<tr>
				<th>指标名称</th>
				<shiro:hasPermission name="ins:insQuota:edit"><th>操作</th></shiro:hasPermission>
			</tr>
		</thead>
		<tbody>
		<c:forEach items="${page.list}" var="insQuota">
			<tr>
				<td><a href="${ctx}/ins/insQuota/form?id=${insQuota.id}">
					${insQuota.name}
				</a></td>
				<shiro:hasPermission name="ins:insQuota:edit"><td>
    				<a href="${ctx}/ins/insQuota/form?id=${insQuota.id}">修改</a>
					<a href="${ctx}/ins/insQuota/delete?id=${insQuota.id}" onclick="return confirmx('确认要删除该指标卡吗？', this.href)">删除</a>
				</td></shiro:hasPermission>
			</tr>
		</c:forEach>
		</tbody>
	</table> --%>
</body>
</html>